<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

    <div  th:fragment="head">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

            <el-menu-item @click="go2Back()">首页</el-menu-item>
            <el-submenu index="2" >
                <template slot="title">博客分类</template>
                <el-menu-item index="0" @click="findByBlogType(1)">所有文章</el-menu-item>
                <el-menu-item :index="type.id" v-for="type in types" @click="findByBlogType(type.id)">{{type.name}}</el-menu-item>
            </el-submenu>

            <el-menu-item index="9" style="float: right">
                <el-button @click="add2Blog()" type="danger" round>
                    发布博客
                </el-button>
            </el-menu-item>
            <el-menu-item style="float: right" index="5">
                <span th:if="${session.SPRING_SECURITY_CONTEXT}!=null">
                    欢迎您的访问！<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.name}"></span>
                </span>
                <div th:if="${session.SPRING_SECURITY_CONTEXT}==null">
                    <el-button @click="go2Login()">登录</el-button>
                </div>
            </el-menu-item>

           <div th:if="${session.SPRING_SECURITY_CONTEXT}!=null">
               <el-menu-item style="float: right" index="7">
                   <el-dropdown @command="handleCommand" size="mini">
                       <el-button>
                           个人<i class="el-icon-arrow-down el-icon--right"></i>
                       </el-button>
                       <el-dropdown-menu slot="dropdown">
                           <el-dropdown-item command="go2UserInfo">个人中心</el-dropdown-item>
                           <el-dropdown-item command="add2Blog" divided>发布博客</el-dropdown-item>
                           <el-dropdown-item command="findAllBLog" >个人博客列表</el-dropdown-item>
                           <el-dropdown-item command="logOut" divided>登出</el-dropdown-item>
                       </el-dropdown-menu>
                   </el-dropdown>
               </el-menu-item>
           </div>
        </el-menu>

    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                formLabelWidth: "120px",
                activeIndex: '1',
                activeIndex2: '1',
                activeName: '1',
                blog: {},
                editor: null,

            },
        })
    </script>
</html>